<template>
	<div class="main-router-view">
		<div class="title">{{id ? '编辑': '新建'}}电影</div>
		<el-form label-width="120px" @submit.native.prevent="save">
			<el-tabs type="border-card">
				<el-tab-pane label="基本信息">
					<el-form-item label="影片id">
						<el-input v-model="model.movieId"></el-input>
					</el-form-item>
					<el-form-item label="影片名字">
						<el-input v-model="model.movieName"></el-input>
					</el-form-item>
					<el-form-item label="评分">
						<el-input v-model="model.score"></el-input>
					</el-form-item>
					<el-form-item label="点赞">
						<el-input type="number" v-model="model.counts"></el-input>
					</el-form-item>
					<el-form-item label="原名">
						<el-input v-model="model.originaName"></el-input>
					</el-form-item>
					<el-form-item label="分类">
						<el-input v-model="model.info"></el-input>
					</el-form-item>
					<el-form-item label="上映时间">
						<el-input v-model="model.releaseDate"></el-input>
					</el-form-item>
					<el-form-item label="时长">
						<el-input v-model="model.totalTime"></el-input>
					</el-form-item>
					<el-form-item label="短片预告">
						<el-input v-model="model.movieUrl"></el-input>
					</el-form-item>
					<el-form-item label="简介">
						<el-input type="textarea" autosize placeholder="请输入内容" v-model="model.plotDesc"></el-input>
					</el-form-item>
					<el-form-item label="封面">
						<el-upload class="avatar-uploader" :action="http.defaults.baseURL + '/movie/api/upload'"
							:show-file-list="false" :on-success="afterUpload">
							<img v-if="model.cover" :src="$mConfig.formatFileUrl(model.cover)" class="avatar" />
							<div v-else class="avatar-uploader-icon">
								<i class="el-icon-plus"></i>
							</div>

						</el-upload>
					</el-form-item>
				</el-tab-pane>
				<el-tab-pane label="参演人物">
					<el-button type="text" @click="model.plotsWords.push({})">
						<i class="el-icon-plus"></i>
						添加人物
					</el-button>
					<el-row type="flex" style="flex-wrap:wrap;">
						<el-col :md="12" v-for="(item, i) in model.plotsWords" :key="i">
							<el-form-item label="图片">
								<el-upload class="avatar-uploader" :action="http.defaults.baseURL + '/movie/api/upload'"
									:show-file-list="false" :on-success="res => $set(item, 'imgUrl', res.url)">
									<img v-if="item.imgUrl" :src="$mConfig.formatFileUrl(item.imgUrl)" class="avatar" />
									<div v-else class="avatar-uploader-icon">
										<i class="el-icon-plus"></i>
									</div>
								</el-upload>
							</el-form-item>
							<el-form-item label="姓名">
								<el-input v-model="item.autor"></el-input>
							</el-form-item>
							<el-form-item label="职位">
								<el-input v-model="item.actorRole"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
				</el-tab-pane>
				<el-tab-pane label="剧照">
					<el-button type="text" @click="model.plotsImg.push({})">
						<i class="el-icon-plus"></i>
						添加剧照
					</el-button>
					<el-row type="flex" style="flex-wrap:wrap;">
						<el-col :md="6" v-for="(item, i) in model.plotsImg" :key="i">
							<el-form-item label="图片">
								<el-upload class="avatar-uploader" :action="http.defaults.baseURL + '/movie/api/upload'"
									:show-file-list="false" :on-success="res => $set(item, 'imgUrl', res.url)">
									<img v-if="item.imgUrl" :src="$mConfig.formatFileUrl(item.imgUrl)" class="avatar" />
									<div v-else class="avatar-uploader-icon">
										<i class="el-icon-plus"></i>
									</div>
								</el-upload>
							</el-form-item>
						</el-col>
					</el-row>
				</el-tab-pane>
			</el-tabs>

			<el-form-item style="margin-top: 40px;">
				<el-button type="primary" round native-type="submit">保存</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	export default {
		name: "MovieEdit",
		props: {
			// id: {}
		},
		data() {
			return {
				model: {
					plotsWords: [],
					plotsImg: []
				},
				id: {}
			};
		},
		methods: {
			afterUpload(res) {
				this.$set(this.model, "cover", res.url);
			},
			// 保存
			async save() {
				let res = "";
				if (this.id) {
					res = await this.http.post(`admin/movies/item/${this.id}`, this.model);
				} else {
					res = await this.http.post("admin/movies/create", this.model);
				}

				this.$router.push({
					name: "MovieList"
				});
				this.$message({
					type: "success",
					message: "保存成功"
				});
			},
			//存在id 获取详情
			async fetchInfo(id) {
				const res = await this.http.get(`admin/movies/item/${id}`);
				console.log(res)
				this.model = res.data;
			}
		},
		created() {
			this.id = this.$route.params.id

			console.log(this.id)

			this.id && this.fetchInfo(this.id);
		}
	};
</script>

<style>
	.title {
		font-weight: bold;
		font-size: 20px;
		margin-bottom: 15px;
	}

	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		overflow: hidden;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409eff;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		line-height: 178px;
		text-align: center;
	}

	.avatar {
		width: 178px;
		height: 178px;
		display: block;
	}
</style>
